<template>
    <van-nav-bar title="退货详情" left-arrow @click-left="back" />
    <section class="aui-flexView">
        <!-- 订单详细 -->
        <section class="aui-scrollView">
            <!-- 订单状态 -->
            <div class="aui-pay-change">
                <div class="aui-flex">
                    <div class="aui-flex-box">
                        <h3>{{ orderInfo.status_text }}</h3>
                    </div>
                    <div class="aui-pay-zfb">
                        <img src="/assets/images/icon-zfb.png" alt="" />
                    </div>
                </div>
            </div>

            <!-- 商家收货地址 -->
            <div class="aui-flex">
                <div style="font-size: 16px">收件地址：</div>
                <div class="aui-flex-box">
                    <h3>
                        {{ orderInfo.companyData.recipient }}<em>{{ orderInfo.companyData.mobile }}</em>
                    </h3>
                    <p>{{ orderInfo.companyData.address }}</p>
                </div>
            </div>

            <!-- 客户退货原因 -->
            <div class="aui-flex">
                <div>退货理由：{{ orderInfo.refundreason }}</div>
                <div></div>
            </div>

            <!-- 客户寄件地址 退货单信息-->
            <div class="aui-flex" v-if="orderInfo.back">
                <div style="font-size: 16px">寄件地址：</div>
                <div class="aui-flex-box">
                    <h3>
                        {{ orderInfo.back.contact }}<em>{{ orderInfo.back.phone }}</em>
                    </h3>
                    <p>{{ orderInfo.back.region_text }}</p>
                </div>
            </div>

            <!-- 商家拒绝退货原因 -->
            <div class="aui-flex" v-if="orderInfo.examinereason">
                <div>商家协商：{{ orderInfo.examinereason }}</div>
                <div></div>
            </div>

            <!-- 订单商品 -->
            <div class="aui-flex">
                <div style="font-size: 16px">商品列表：</div>
            </div>
            <div class="aui-commodity-bg" v-for="item in orderInfo.product" :key="item.id" style="background: transparent">
                <div style="margin-bottom: 10px; background: #f5f5f5">
                    <div class="aui-flex">
                        <div class="aui-commodity-img">
                            <img :src="item.product.thumbs_text"/>
                        </div>
                        <div class="aui-flex-box">
                            <h4 class="van-ellipsis">商品名称：{{ item.product.name }}</h4>
                            <p>商品单价：￥{{ item.product.price }}</p>
                            <span class="aui-barter-time">七天退换</span>
                        </div>
                        <div>
                            <h5>￥{{ item.total }}</h5>
                            <p class="aui-sml-text">X{{ item.pronum }}</p>
                        </div>
                    </div>

                </div>
            </div>

            <!-- 退货物流 -->
            <van-steps direction="vertical" :active="0" v-if="orderInfo.expressList">
                <van-step v-for="(item,index) in orderInfo.expressList" :key="index">
                    <h3>{{ item.status }}</h3>
                    <p>{{ item.time }}</p>
                </van-step>
            </van-steps>
        </section>
    </section>
</template>

<script setup>
import { getCurrentInstance, onBeforeMount } from "vue"
const { proxy } = getCurrentInstance()
const back = () => proxy.$router.push("/order/index");

onBeforeMount(()=>{
    getData()
})

const orderid = proxy.$route.query.orderid?proxy.$route.query.orderid:"0"
const busid = proxy.$cookies.get("business")?proxy.$cookies.get("business").id:"0"
let orderInfo = ref({
    back:{},
    companyData:{}
})
const getData = async () => {
    let data = {
        orderid,
        busid
    }
    let result = await proxy.$POST({
        url:"/business/refundIndex",
        params:data
    })
    if(result.code){
        orderInfo.value = result.data
        return false
    }else{
        proxy.$fail(result.msg)
        return false
    }
}
</script>